<template>
	<div>
		<view class="banner-wrap" :class="{'no-filter':small}">
			<uni-swiper-dot
				:info="getBanners"
				:current="current"
				:mode="mode"
				:dotsStyles="dotsStyles"
			>
				<swiper class="swiper-box" :class="{ small: small }" @change="change">
					<swiper-item v-for="(item, index) in getBanners" :key="index">
						<view class="swiper-item" @click="onBanner(item)">
							<image :src="item.img" mode="widthFix"></image>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
	</div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
export default {
	props: {
		small: {
			type: Boolean,
			default: function() {
				return false;
			}
		},
		banners: {
			type: Array,
			default: function() {
				return []
			}
		}
	},
	data() {
		return {
			current: 0,
			mode: 'round',
			dotsStyles: {
				width: 8,
				border: 'white',
				backgroundColor: 'rgba(255,255,255,0.2)',
				selectedBackgroundColor: 'white',
				selectedBorder: 'white'
			},
			bigBanners:[{
					type: '1',
					img: require('@/static/banner/big-banner.png'),
					url: 'http://www.twinedu.com/'
				},
				{
					type: '2',
					img: require('@/static/banner/big-banner.png'),
					url: '/subpages/home/template'
			}],
			smallBanners : [{
				type: '2',
				img: require('@/static/banner/small-banner.png'),
				url: '/subpages/home/template'
			}]
		};
	},
	computed: {
		getBanners:function(){
			return this.banners.length > 0 ? this.banners : this.small ? this.smallBanners : this.bigBanners
		}
	},
	methods: {
		...mapMutations(['setWebViewUrl']),
		// 轮播图点击
		onBanner(item) {
			if (item.type === '1') {
				// 跳转外链页面
				// #ifdef H5
				window.open(item.url);
				// #endif
				// #ifndef H5
				this.$store.commit('setWebViewUrl', item.url);
				uni.navigateTo({
					url: '/subpages/home/webView'
				});
				// #endif
			} else if (item.type === '2') {
				// 跳转内部页面
				uni.navigateTo({
					url: item.url
				});
			}
		},
		change(e) {
			this.current = e.detail.current;
		}
	}
};
</script>

<style lang="scss" scoped>
.banner-wrap {
	margin: 16upx 0;
	filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.16));

	.swiper-box {
		height: 306upx;
		.swiper-item {
			image {
				height: 306upx;
				border-radius: 16upx;
				width: 686upx;
				margin: 0 auto;
			}
		}
	}

	.swiper-box.small {
		height: 228upx;
		.swiper-item {
			image {
				height: 228upx;
				border-radius: 16upx;
				width: 686upx;
				margin: 0 auto;
			}
		}
	}
}
.banner-wrap.no-filter{
	filter:none
}
</style>
